<template>
	<!-- 余额明细 -->
	<view class="page">
		<view class="select">
			<view class="select_item" @click="calendarShow=true">
				{{apiParams.timeDTO.start&&apiParams.timeDTO.end?apiParams.timeDTO.start+'~'+apiParams.timeDTO.end:'全部时间'}}
				<u-icon name="arrow-down-fill" color="#1A1A1A" size="20rpx"></u-icon>
			</view>
			<view class="select_item" @click="showType=true">
				{{apiParams.type==0?'收入':apiParams.type==1?'支出':'明细类型'}}
				<u-icon name="arrow-down-fill" color="#1A1A1A" size="20rpx"></u-icon>
			</view>
		</view>
		<view class="list">
			<c-scroll-list ref="list" :api="api" :apiParams="apiParams" @load="load">
				<view class="list_item" v-for="(v,i) in list" :key="i">
					<view class="title" v-if="v.type==1">提现</view>
					<view class="title" v-if="v.type==0">
						{{v.incomeSource}}推广{{v.title}}收入{{$fn.twoToFixed(v.amount)}}元</view>
					<view class="info">
						<view class="date">{{$fn.parseTime(v.createTime)}}</view>
						<view class="price" :class="{p1:v.type==0,p2:v.type==1}">
							{{v.type==0?'+':'-'}}{{$fn.twoToFixed(v.amount)}}
						</view>
					</view>
				</view>
			</c-scroll-list>
		</view>

		<u-calendar :show="calendarShow" minDate="2025-01-01" :maxDate="maxDate" mode="range" @confirm="calendarConfirm"
			@close="calendarShow=false"></u-calendar>

		<u-picker :show="showType" :columns="columns" keyName="label" @cancel="showType=false"
			@confirm="showTypeConfirm"></u-picker>
	</view>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		name: "balanceDetails",
		data() {
			return {
				api: this.$api.getBalanceDetail,
				apiParams: {
					timeDTO: {
						end: "",
						start: ""
					},
					type: null,
				},
				list: [],
				calendarShow: false,
				maxDate: `${year}-${month}-${date}`,
				showType: false,
				columns: [
					[{
						label: '全部',
						// 其他属性值
						id: -1
					}, {
						label: '收入',
						// 其他属性值
						id: 0
					}, {
						label: '支出',
						// 其他属性值
						id: 1
					}, ]
				]
			};
		},
		onLoad() {},
		onShow() {},
		methods: {
			// 刷新
			refresh() {
				setTimeout(() => this.$refs.list.initList(), 500)
			},
			// 日历确认窗
			calendarConfirm(e) {
				console.log('日历确认窗', e);
				this.apiParams.timeDTO.start = e[0]
				this.apiParams.timeDTO.end = e[e.length - 1]
				this.calendarShow = false
				this.refresh()
			},
			// 明细类型确认框
			showTypeConfirm(e) {
				console.log('明细类型确认框', e);
				if (e.value[0].id == -1) {
					this.apiParams.type = null
				} else {
					this.apiParams.type = e.value[0].id
				}
				this.showType = false
				this.refresh()
			},
			// 余额明细列表
			load(res) {
				console.log('余额明细列表', res);
				this.list = res.list
			}
		}
	};
</script>

<style lang="scss" scoped>
	.select {
		display: flex;
		align-items: center;
		gap: 120rpx;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #D9D9D9;

		.select_item {
			display: flex;
			align-items: center;
			gap: 10rpx;
			font-size: 28rpx;
			color: #666666;
		}
	}

	.list {
		padding: 0 32rpx;
		box-sizing: border-box;

		.list_item {
			padding: 32rpx 0 26rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #E6E6E6;

			.title {
				font-size: 32rpx;
				color: #1A1A1A;
				margin-bottom: 20rpx;
			}

			.info {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.date {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}

				.price {
					font-weight: bold;
					font-size: 28rpx;
				}

				.p1 {
					color: #EF4630;
				}

				.p2 {
					color: #333333;
				}
			}
		}
	}
</style>